@import '../common.scss';

.scroll-navigation-container {
  display: none;
  @include from($desktop) {
    pointer-events: none;
    display: block;
    font-size: 16px;
    position: sticky;
    width: 100%;
    margin-right: -100%;

    left: 0;
    top: -100px;
    padding-top: 200px;
  }
}

.scroll-navigation-container-inner {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
}

.scroll-navigation {
  pointer-events: auto;

  display: flex;
  width: 30%;
  max-width: 30% / 0.9;
  height: 100%;
  overflow-y: auto;
  max-height: calc(100vh - 100px);

  padding-right: 1rem;
  z-index: 30;

  li {
    list-style-type: none;

    &:hover,
    &.selected {
      a {
        background-color: var(--color-text);
        color: var(--color-background) !important;
      }
    }

    &::before {
      content: '-';
    }
  }
}

.left-navigation-link {
  padding-left: 1.2rem;
  text-indent: -1.2rem;
  display: block;

  &:hover {
    background-color: var(--color-text) !important;
    color: var(--color-background) !important;
  }

  // &::before {
  //   content: '';
  //   display: inline-block;
  //   width: 1.5rem;
  //   height: 1.5rem;
  //   border-radius: 50%;
  //   border-width: 2px;
  //   border-style: solid;
  //   margin-right: 2rem;
  //   background-color: inherit;
  //   border-color: inherit;
  // }
}

.level-h1 {
  font-weight: bold;
  padding-left: 2.8rem;
  text-indent: -2.8rem;
}

.level-h2 {
  padding-left: 1.6rem;
  text-indent: -1.6rem;
}
